/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
//c- is used before a component class to understand that its a component. since collapse is a gerneric name, it might have used in many places and need to avoid the conflicts.

$collapse-icon-size: $component-icon-size;
$collapse-border: $border-grey;
$collapse-icon-color: #ddd;

.c-collapse {
  background:    $go-white;
  position:      relative;
  border:        1px solid $collapse-border;
  border-radius: $global-border-radius;
  margin-bottom: 10px;
  &.collapsed {
    background: $go-white;
  }
  &.expanded {
    @extend %box-shadow;
    .c-collapse_header {
      border-bottom: 1px solid $collapse-border;
    }
  }
}

.c-collapse_header {
  @include clearfix();
  padding: 10px 50px 10px 30px;
  cursor:  pointer;
  &.collapsed {
    @include icon-before($type: angle-right, $color: $collapse-icon-color);
    &:before {
      position:  absolute;
      right:     10px;
      font-size: 30px;
      top:       3px;
    }
  }
  &.expanded {
    @include icon-before($type: angle-down, $color: $collapse-icon-color);
    &:before {
      position:  absolute;
      right:     10px;
      font-size: 30px;
      top:       3px;
    }
  }
}

.c-collapse_header_details {
  float:       left;
  display:     flex;
  align-items: center;
}

.c-collapse_title {
  @extend %title;
  float: left;
}

.c-collapse_icon {
  width:          $collapse-icon-size;
  height:         $collapse-icon-size;
  display:        inline-block;
  vertical-align: middle;
  float:          left;
  margin:         0 15px 0 -15px;
}

.c-collapse_body {
  padding: 20px 30px;
}

.collapse_header_details {
  display: flex;
}
